<template>
  <div class="box">
    <!-- 一、头部 -->
    <div class="header">
      <!-- 搜索框 -->
      <van-search
        class="search-box"
        v-model="value1"
        shape="round"
        background="#fff"
        placeholder="清风抽纸"
        show-action
        @search="onSearch"
        @focus="show"
        @blur="notshow"
      >
        <!-- 搜索框左侧 -->
        <template #left>
          <van-icon name="arrow-left" @click="goBack" />
        </template>
        <!-- 搜索框右侧 -->
        <template #action>
          <van-button @click="onSearch" class="search" type="danger"
            >搜索</van-button
          >
        </template>
      </van-search>
    </div>
    <!-- 二、下拉菜单 -->
    <div class="menu">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="最低价格">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="最高价格">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 三、商品列表 -->
    <van-card
      v-for="obj in list"
      :key="obj.proid"
      :price="obj.originprice"
      :title="obj.proname"
      :thumb="obj.img1"
      @click="goDetail(obj.proid)"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "brandGoods",
  components: {},
  data() {
    return {
      value1: "",
      list: [],
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 },
      ],
    };
  },
  created() {
    let brand = this.$route.query.brand;
    let category = this.$route.query.category;
    console.log('category: ', category);
    let keyword = localStorage.getItem("this.keyword");
    this.value1 = keyword;
    // this.value1 = brand;
    // 获取某分类下某品牌的产品列表
    axios({
      url: "/api/pro/categorybrandprolist",
      params: {
        category: category,
        brand: brand,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        this.list = res.data.data;
      }
    });

    axios({
      url:"/api/pro/search",
      params:{
        keyword:keyword
      }
    }).then((res)=>{
      if(res.data.code == 200){
        this.list = res.data.data;
      }
    })
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSearch(val) {
      console.log(val);
    },
    // 跳到详情页
    goDetail(goodsid) {
      this.$router.push("/GoodsDetail/" + goodsid);
    },
    // 输入框获得焦点时触发
    show() {
      document.querySelector(".van-button").style.opacity = 1;
    },
    // 输入框失去焦点时触发
    notshow() {
      document.querySelector(".van-button").style.opacity = 0;
    },
    onConfirm() {
      // 切换菜单展示状态
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}
.search-box {
  flex: 1;
}
.search {
  width: 4.5rem;
  height: 2rem;
  border-radius: 0.5333rem;
  margin-left: 0.8333rem;
  vertical-align: middle;
  /* 可以隐藏内容和背景 */
  opacity: 0;
}
.van-search{
  display: flex;
  justify-content: space-around;
}
</style>